<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/swiper.css" />
        <link rel="stylesheet" href="css/mint.css">
    </head>
        <script src="js/serverUrl.js"></script>
        <script src="js/vue.js"></script>
        <script src="js/mint.js"></script>
        <script src="js/moment.js"></script>
    <body>
        <div id="app">
            <div id="table" style="background-color:#f0f0f0" class="card">
                <div v-for="(item,index) in trainingList" class="trainingItem" @click.self="toDetail(index)">
                    <div class="trainingTitle"><span ><img src="img/training_record.png" class="titeImage"></span>{{item.trainingClassName}}</div>
                    <div class="trainingRow">
                        <div class="trainingInfo">部门：{{item.departmentName}}</div>
                        <div class="trainingInfo">{{item.startTime | formatDay}}</div>
                    </div>
                    <div class="trainingInfo">学习时间：{{item.startTime | formatTime}} -- {{item.endTime | formatTime}}</div>
                    <div class="trainingInfo" style="margin-bottom: 10px;">培训负责人：{{item.teacherName}}</div>
                    
                    <div class="opertionContainer">
                        <div class="trainingOperation" @click.stop="toSign(item.trainingClassId)">
                            <img src="img/training_code.png" class="operationImage" />
                            <div class="operationName">签到情况</div>
                        </div>
                        <div class="trainingOperation" @click.stop="toCode(item.trainingClassName,item.trainingClassId)">
                            <img src="img/training_code.png" class="operationImage" />
                            <div class="operationName">签到码</div>
                        </div>
<!--                        <div class="trainingOperation">-->
<!--                            <img src="img/training_consulotion.png" class="operationImage" />-->
<!--                            <div class="operationName">培训总结</div>-->
<!--                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data:{
          trainingList:
            [
            ],
          },
          filters:{
            formatTime(val){
                if (val == null) {
                    return ""
                }
                return moment(val).format("HH:mm")
            },
            formatDay(val){
                if (val == null) {
                    return ""
                }
                return moment(val).format("YYYY年MM月DD日")
            }
          },
          created() {
            window.getTrainingList = this.getTrainingList
            window.clear = this.clear
          },
          methods:{
              getTrainingList (trainingList){
                  this.trainingList = this.trainingList.concat(trainingList)
              },
              clear(){
                  this.trainingList = []
              },
              toDetail(index) {
                  toDetailController(JSON.stringify(this.trainingList[index]))
              }
          }
        })
        </script>
</html>
